<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>员工信息列表</title>
</head>
<body>
<table id="employeeTable" border="1" cellspacing="0" cellpadding="0" style="text-align: center">
    <tr>
        <th colspan="5">employee_info</th>
    </tr>
    <tr>
        <td>id</td>
        <td>lastName</td>
        <td>email</td>
        <td>gender</td>
        <td>options（<a th:href="@{/toAdd}">添加</a>）</td>
    </tr>
    <tr th:each="employee : ${employeeList}">
        <td th:text="${employee.id}"></td>
        <td th:text="${employee.lastName}"></td>
        <td th:text="${employee.email}"></td>
        <td th:text="${employee.gender}"></td>
        <td>
<!--            <a th:href="@{'/employee/' + ${employee.id}}">delete</a>-->
            <button class="delBtn" @click="deleteFun" th:herf="@{/employee}" th:emid= "${employee.id}">delete</button>
            <button class="updBtn" @click="updateFun" th:herf="@{/employee}" th:emid= "${employee.id}">update</button>
<!--            <a th:href="@{'/employee/' + ${employee.id}}">delete</a>-->
        </td>
    </tr>
</table>
<!-- 作用：通过超链接控制表单的提交，将post请求转换为delete请求 -->
<form id="delete_form" method="post">
    <!-- HiddenHttpMethodFilter要求：必须传输_method请求参数，并且值为最终的请求方式 -->
    <input type="hidden" name="_method" value="delete"/>
</form>

<form id="update_form" method="get">
</form>
<script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    let vue = new Vue({
        el:"#employeeTable",
        methods:{
            deleteFun: function (event) {
                let id = event.target.getAttribute("emid");
                console.log(id)
                //通过id获取表单标签
                var delete_form = document.getElementById("delete_form");
                //将触发事件的超链接的href属性为表单的action属性赋值
                delete_form.action = event.target.getAttribute("herf") + "/" + id;
                //提交表单
                delete_form.submit();
                // //阻止超链接的默认跳转行为
                // event.preventDefault();
            },
            updateFun: function (event) {
                let id = event.target.getAttribute("emid");
                console.log(id);
                var update_form = document.getElementById("update_form");
                update_form.action = event.target.getAttribute("herf") + "/" + id;
                //提交表单
                update_form.submit();
            }
        }

    });

</script>
</body>
</html>